/*******
 * 处理下拉列表框（普通的列表，级联列表）的视图渲染
 * @params(item) 下拉列表框的基本属性，必选参数
 * @params(form)  用于实现表单的校验，必选参数
 * @params(formItemLayout) 用户自定义label和select框的比例，可选参数
 * @return 下拉列表框的视图
 *******/

import React,{ Component } from 'react';
import loadSelectData from './../../utils/loadSelectData';
import { SelectMap, CascaderMap } from './SelectMap';
import { Form, Select, Cascader } from 'antd';
const FormItem = Form.Item;

class SelectComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectList: []
        }
    }

    componentWillMount(){
        let url = SelectMap(this.props.item.dataType);
        loadSelectData(url,{ method: 'GET' })
            .then(({ data }) => {
                this.setState({
                    selectList: data.data
                })
            })
            .catch((err)=>{
                console.log(err)
            })
    }

    render(){
        const { item, form, formItemLayout, currentFilter } = this.props;
        const { getFieldDecorator } = form;
        const { selectList } = this.state;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentFilter[item.filed],
                    rules: item.rules
                })(
                    <Select style={{width: '100%'}} placeholder={item.placeholder}>
                        {
                            selectList.map((e, index) => {
                                return <Select.Option key={index} value={e.value}>{e.name}</Select.Option>
                            })
                        }
                    </Select>
                )}
                </FormItem>
        )
    }
}

class CascaderComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            cascaderList: []
        }
    }

    componentWillMount(){
        let url = CascaderMap(this.props.item.dataType);
        loadSelectData(url,{ method: 'GET' })
            .then(({ data }) => {
                this.setState({
                    cascaderList: data.data
                })
            })
            .catch((err)=>{
                console.log(err)
            })
    }

    render(){
        const { item, formItemLayout, form, currentFilter } = this.props;
        const { getFieldDecorator } = form;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentFilter[item.filed],
                    rules: item.rules
                })(
                    <Cascader placeholder={item.placeholder} style={{width: '100%'}} options={this.state.cascaderList}/>
                )}
            </FormItem>
        )
    }
}

export default function(item,form,formItemLayout,currentFilter) {
    const selectProps = {
        item,
        form,
        formItemLayout,
        currentFilter
    };
    switch (item.type) {
        case 'Select':
            return (
                <SelectComponent {...selectProps} />
            );
        case 'Cascader':
            return (
                <CascaderComponent {...selectProps} />
            );
        default:
            return;
    }
}